<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Issue_D</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./js/echarts/echarts.min.js"></script>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/vue.js"></script>
    <script src="./js/cookie.min.js"></script>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/common.css">
    <script src="js/bootstrap.min.js"></script>
    <script src="js/common.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">中国与东盟十国合作关系</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="/issue_A.html">与东盟十国合作态势变化（年份-学科）<span class="sr-only">(current)</span></a></li>
                <li><a href="/issue_B.html">与东盟十国的合作态势（年份-国家）</a></li>
                <li><a href="/issue_C.html">与东盟十国的合作态势（地图）</a></li>
                <li  class="active"><a href="/issue_D.html">发文机构占比</a></li>
                <li><a href="/issue_G.html">各东盟在核心领域的作者</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<div id="app" class="item">
    <div id="issue_d" class="item"></div>
</div>
</body>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            issue_d: {
                data: {
                    xAxis: [],
                    category: [],
                    details: [],
                    selected: {},
                    d: []
                }
            }
        },
        methods: {
            req: async function (addr) {
                let e = await reqXXX(addr, this.issue_d);
                console.log(e);
                let obj = JSON.parse(e.currentTarget.responseText);
                let self = this;
                console.log(obj[0]);
                let count = 0;
                let sum = 0;
                Object.keys(obj).forEach(function (key) {
                    count++;
                    Object.keys(obj[key]).forEach(function (k) {
                        if (count <= 20) {
                            self.issue_d.data.d.push({
                                name: k,
                                value: obj[key][k]
                            });
                        } else {
                            sum += obj[key][k];
                        }
                    })
                })
                this.issue_d.data.d.push({
                    name: "其他",
                    value: sum
                })

                console.log("here");
                this.issue_d.eChart.setOption({
                    series: {
                        data: this.issue_d.data.d
                    }
                });
            },
            series: function () {
                console.log("series");
                return {
                    name: "机构名",
                    type: "pie",
                    radius: "55%",
                    data: this.issue_d.data.d
                };
            },
            test: function () {
                this.issue_d.eChart = echarts.init(document.getElementById("issue_d"));
                this.issue_d.eChart.setOption({
                    title: {
                        text: "广东与东盟十国间资助机构发文量占比",
                        left: '300',
                        textStyle: {
                            color: "#777",
                            fontSize: 16
                        }
                    },
                    tooltip: {
                        data: [],
                    },
                    legend: {
                        orient: 'vertical',
                        type: "scroll",
                        selected: [],
                        left: 'auto',
                        padding: [0, 50, 0, 0]
                    },
                    series: this.series(),
                    toolbox: {
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: false},
                            magicType: {
                                type: ['stack', 'tiled', 'line', 'bar'],
                            },
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },

                });

            }
        },
        computed: {},
        mounted: function () {
            this.test();
            this.req("/issue_d");
            console.log("mounted!")
        }
    });
</script>
</html>